<template>
  <scroll class="scroll-wrapper" :data="goods_list" :probeType="3" ref="scroll" :listenScroll="true" @scroll="scroll">
    <div class="content">
      <product-list :goodsList=" goods_list " v-if="goods_list "></product-list>
      <loading v-else></loading>
    </div>
    <go-top @toTop="toTop" :scrollY="scrollY"></go-top>
  </scroll>
</template>

<script>
import { cateproductList } from "../../../api/getDatas";
import productList from "../../../components/ProductList/productList";
import Loading from "../../../components/loading/loading";

import scroll from "../../../common/scroll";

import goTop from "../../../components/goTop/goTop";
export default {
  props: ["optId"],
  components: {
    productList,
    scroll,
    Loading,
    goTop
  },
  data() {
    return {
      opt_type: 2,
      size: 100,
      offset: 0,
      goods_list: null,
      scrollY: null
    };
  },
  methods: {
    toTop() {
      this.$refs.scroll.scrollTo(0, 0, 500);
    },
    scroll(pos) {
      this.scrollY = -pos.y;
    },
    initData() {
      cateproductList(this.optId, this.opt_type, this.size, this.offset)
        .then(res => {
          this.goods_list = res.data.goods_list;
        })
        .catch(err => {
          this.initData();
        });
    }
  },
  created() {
    this.initData();
  }
};
</script>

<style lang="less" scoped>
.scroll-wrapper {
  height: 100%;
  overflow: hidden;
}
</style>
